<template>
    <div class="operationData">
        <div class="header flexbetween">
            <div class="flex-center">
                <span class="title">数据范围</span>
                <el-radio-group v-model="time" size="small" class="mr20" @change="radioTimeChange">
                    <el-radio-button label="0">今天</el-radio-button>
                    <el-radio-button label="1">昨天</el-radio-button>
                    <el-radio-button label="7">近一周</el-radio-button>
                    <el-radio-button label="30">近30天</el-radio-button>
                </el-radio-group>
                <el-date-picker class="mr20" v-model="date" size="small" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                                value-format="yyyy-MM-dd" :picker-options="pickerOptions" @change="dateRangeChange">
                </el-date-picker>
                <div class="mr20">渠道入口</div>
                <a-select v-model="sourceIds" style="width: 300px" mode="multiple" @change="getOperatingData"
                          :getPopupContainer="triggerNode => { return triggerNode.parentNode }">
                    <a-select-option v-for="source in sourceList" :key="source.id" :value="source.id">
                        {{ source.sourceName }}
                    </a-select-option>
                </a-select>
            </div>
            <span class="hint">仅支持查询近90天的数据</span>
        </div>
        <div class="card mb20">
            <div class="card-header flexbetween">
                <span class="title">关键指标</span>
            </div>
            <div class="card-body chartBody">
                <div class="linechart" v-for="(item,i) in linechartList" :key="i">
                    <div class="headers flexbetween">
                        <div class="leftData">
                            <div>
                                <span class="title">{{item.title}}</span>
                                <el-tooltip effect="light" :content="item.hint" placement="top" :enterable="false">
                                    <span class="iconfont icon-wenziduiyingyiwen"></span>
                                </el-tooltip>
                            </div>
                            <p class="num">{{item.total}}</p>
                        </div>
                        <div class="rightData">
                            <p class="title">比上个周期</p>
                            <p :class="['percent',{'isBurden':item.isBurden}]">{{item.percent}}</p>
                        </div>
                    </div>
                    <div class="chartContent">
                        <echarts :optionData="chartOptionList[i]"></echarts>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header flexbetween">
                <span class="title">数据明细</span>
                <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                    <span class="iconfont icon-xiazai" @click="exportTable"></span>
                </el-tooltip>
            </div>
            <div class="card-body">
                <element-table :data="dataList" :columns="cloumns" :loading="tableLoading" :tableHeight="350" :pageNo="pageNo"
                               :pageSize="pageSize" :total="total" @changePageNo="changePageNo" @changePageSize="changePageSize"
                               :pagFixed="false" :isNeedPag="false">
                </element-table>
            </div>
        </div>

        <!-- 导出 -->
        <exportExcel ref="exportExcel"></exportExcel>
    </div>
</template>

<script>
import elementTable from "@/components/elementTable";
import echarts from "@/components/Echarts";
import exportExcel from "@/components/exportExcel";
import { merge } from "lodash";
import { initFilterTime } from "@/utils/index";
import { getOperaKpi, getOperaSummaryList, exportOperaSummaryList } from "@/api/robotReport.js";
import { mapGetters } from "vuex";
var chartOption1 = {
    xAxis: {
        type: 'category',
        axisLabel: {
            color: "#90979D",
            fontSize: 12,
        },
        data: []
    },
    yAxis: {
        type: 'value',
        axisLabel: { //y轴文字颜色
            color: "#90979D",
            fontSize: 12
        },
    },
    grid: {
        left: "10px",
        bottom: "30px"
    },
    dataZoom: [
        {
            type: "slider",
            show: false,
            handleSize: 0,
            brushSelect: false,
            height: 15,
            bottom: 5,
            maxValueSpan: 7
        }
    ],
    series: [
        {
            data: [],
            type: 'line',
            symbol: 'circle',
            symbolSize: 10,
            areaStyle: {
                color: 'rgba(83,126,247,0.1)', //面积背景颜色
            },
            emphasis: {
                scale: false, //是否放大
                // 鼠标移上去的时候，拐点的颜色和样式
                itemStyle: {
                    borderColor: 'rgba(83,126,247,0.2)', //图形的描边颜色
                    borderWidth: 15, // 描边的线宽
                }
            },
            itemStyle: {
                color: '#537EF7', //折线点颜色
                lineStyle: {
                    color: '#537EF7' //折线颜色
                }
            },
        }
    ]
};

var chartOption2 = {
    series: [
        {
            areaStyle: {
                color: 'rgba(0, 150, 136,0.1)', //面积背景颜色
            },
            emphasis: {
                itemStyle: {
                    borderColor: 'rgba(0, 150, 136,0.2)', //图形的描边颜色
                }
            },
            itemStyle: {
                color: '#009688', //折线点颜色
                lineStyle: {
                    color: '#009688' //折线颜色
                }
            },
        }
    ]
}

var chartOption3 = {
    series: [
        {
            areaStyle: {
                color: 'rgba(14, 184, 216,0.1)', //面积背景颜色
            },
            emphasis: {
                itemStyle: {
                    borderColor: 'rgba(14, 184, 216,0.2)', //图形的描边颜色
                }
            },
            itemStyle: {
                color: '#0EB8D8', //折线点颜色
                lineStyle: {
                    color: '#0EB8D8' //折线颜色
                }
            },
        }
    ]
}

chartOption2 = merge({}, chartOption1, chartOption2);
chartOption3 = merge({}, chartOption1, chartOption3);
var chartOption4 = merge({}, chartOption1);
var chartOption5 = merge({}, chartOption2);
var chartOption6 = merge({}, chartOption3);

export default {
    name: "operationData",
    data() {
        return {
            time: "0",
            date: "",
            sourceIds: [],
            linechartList: [
                {
                    title: "接待量(人数)",
                    hint: "统计周期范围内的总的机器人接待过的会话总数",
                    total: "0",
                    percent: "0%",
                },
                {
                    title: "接待用户数(人数)",
                    hint: "统计周期范围内的总的机器人接待过的用户数量总数",
                    total: "0",
                    percent: "0%",
                },
                {
                    title: "转人工率",
                    hint: "统计周期范围内的成功转人工的会话数占机器人接待过得会话总数占比",
                    total: "0%",
                    percent: "0%",
                },
                {
                    title: "知识命中率",
                    hint: "统计周期范围内的总的机器人接待过的会话总数",
                    total: "0%",
                    percent: "0%",
                },
                {
                    title: "平均对话轮次",
                    hint: "统计周期范围内的总的机器人接待过的会话总数",
                    total: "0",
                    percent: "0%",
                },
                {
                    title: "平均会话时长",
                    hint: "统计周期范围内的总的机器人接待过的会话总数",
                    total: "0分0秒",
                    percent: "0%",
                },
            ],
            chartOptionList: [
                chartOption1, chartOption2, chartOption3, chartOption4, chartOption5, chartOption6
            ],
            pickerOptions: {
                disabledDate(time) {
                    let curDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
                    let three = 90 * 24 * 3600 * 1000;
                    let threeMonths = curDate - three;
                    return time.getTime() > curDate || time.getTime() < threeMonths;;
                }
            },
            dataList: [],
            tableLoading: false,
            pageNo: 1,
            pageSize: 10,
            total: 0,
            cloumns: [
                {
                    config: {
                        label: "日期",
                        prop: "date"
                    },
                },
                {
                    config: {
                        label: "接待量（人次）",
                        prop: "receptions"
                    },
                },
                {
                    config: {
                        label: "接待用户数（人）",
                        prop: "receptionUserCounts"
                    },
                },
                {
                    config: {
                        label: "知识命中率",
                    },
                    render: (h, scope) => {
                        return (<span>{scope.questionHitRatios}%</span>)
                    }
                },
                {
                    config: {
                        label: "平均对话轮次",
                        prop: "meanDialogueTimesList"
                    },
                },
                {
                    config: {
                        label: "平均会话时长",
                        prop: "meanDialogueDurations"
                    },
                },
                {
                    config: {
                        label: "转人工率",
                    },
                    render: (h, scope) => {
                        return (<span>{scope.seatTakeRatios}%</span>)
                    }
                },
                {
                    config: {
                        label: "知识评价量",
                        prop: "commentCount"
                    },
                },
                {
                    config: {
                        label: "知识评价率",
                    },
                    render: (h, scope) => {
                        return (<span>{scope.commentRatio}%</span>)
                    }
                },
                {
                    config: {
                        label: "点赞量",
                        prop: "satisfiedCount"
                    },
                },
                {
                    config: {
                        label: "点赞率",
                    },
                    render: (h, scope) => {
                        return (<span>{scope.satisfiedRation}%</span>)
                    }
                },
            ],
        }
    },
    methods: {
        getOperatingData() {
            if (!this.date) {
                return this.$antMessage.warning("请选择日期");
            }
            var param = {
                startDate: this.date[0],
                endDate: this.date[1],
                sourceIds: this.sourceIds
            }
            getOperaKpi(param).then(resp => {
                if (resp.status == 0) {
                    var data = resp.data;
                    var percentList = [data.receptionsCompare, data.receptionUserCountsCompare, data.seatTakeRatiosCompare, data.questionHitRatiosCompare
                        , data.meanDialogueTimesListCompare, data.meanDialogueDurationsCompare];
                    var totalList = [data.receptionsAmount, data.receptionUserCountAmount, data.seatTakeRatio + "%",
                    data.questionHitRatio + "%", data.meanDialogueTimes, data.meanDialogueDuration];
                    var dataList = [data.receptions, data.receptionUserCounts, data.seatTakeRatios, data.questionHitRatios, data.meanDialogueTimesList, data.meanDialogueDurations];
                    var dateList = [];
                    data.dateList.forEach((item) => {
                        dateList.push(item.substring(5))
                    });
                    this.linechartList.forEach((item, i) => {
                        var has = String(percentList[i]).indexOf(".") > -1;
                        item.isBurden = percentList[i] < 0;
                        item.percent = has ? percentList[i].toFixed(2) + "%" : percentList[i] + "%";
                        item.total = totalList[i];
                    });
                    this.chartOptionList.forEach((item, i) => {
                        var isShow = dateList.length > 8;
                        if (isShow) {
                            this.$set(this.chartOptionList[i].grid, "bottom", "30px");
                        } else {
                            this.$set(this.chartOptionList[i].grid, "bottom", "0px");
                        }
                        //单天显示柱状图、多天显现折线图
                        if (this.time == "0" || this.time == "1") {
                            this.$set(this.chartOptionList[i].series[0], "type", "bar");
                            this.$set(this.chartOptionList[i].series[0], "barWidth", 30);
                        } else {
                            this.$set(this.chartOptionList[i].series[0], "type", "line");
                        }
                        this.$set(this.chartOptionList[i].dataZoom[0], "show", isShow);
                        this.$set(this.chartOptionList[i].xAxis, "data", dateList);
                        this.$set(this.chartOptionList[i].series[0], "data", dataList[i]);
                    });
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
            this.tableLoading = true;
            getOperaSummaryList(param).then(resp => {
                this.tableLoading = false;
                if (resp.status == 0) {
                    this.dataList = resp.data || [];
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        radioTimeChange(val) {
            this.date = initFilterTime(val);
            this.getOperatingData();
        },
        changePageSize(val) {
            this.pageSize = val;
        },
        changePageNo(val) {
            this.pageNo = val;
        },
        dateRangeChange() {
            this.time = "";
            this.getOperatingData();
        },
        exportTable() {
            if (!this.date) {
                return this.$antMessage.warning("请选择日期");
            }
            var param = {
                startDate: this.date[0],
                endDate: this.date[1],
                sourceIds: this.sourceIds
            }
            this.$refs.exportExcel.showLoading();
            exportOperaSummaryList(param).then(resp => {
                this.$refs.exportExcel.closeLoading();
                if (resp.status == 0) {
                    this.$refs.exportExcel.exports("运营关键数据-数据明细", resp.data);
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        onExportExcelError() {
        },
    },
    created() {
        this.date = initFilterTime(0);
        this.getOperatingData();
    },
    computed: {
        ...mapGetters(["sourceList"]),
    },
    components: {
        echarts,
        elementTable,
        exportExcel
    }
}
</script>

<style lang="scss">
.operationData {
    .chartBody {
        display: flex;
        flex-wrap: wrap;
        .linechart {
            width: 32%;
            height: 290px;
            padding: 20px;
            border-radius: 6px;
            background: #fafbfc;
            margin-right: 20px;
            &:nth-child(3n) {
                margin-right: 0;
            }
            &:nth-child(-n + 3) {
                margin-bottom: 20px;
            }
            .headers {
                line-height: 14px;
            }
            .leftData {
                .title {
                    color: #676e75;
                    margin-right: 5px;
                }
                .iconfont {
                    font-size: 22px;
                    color: #b7c1c9;
                    vertical-align: bottom;
                }
                .num {
                    margin-top: 10px;
                    font-size: 20px;
                    color: #363c43;
                }
            }
            .rightData {
                .title {
                    color: #90979d;
                }
                .percent {
                    margin-top: 10px;
                    font-size: 20px;
                    color: #41cb84;
                    text-align: right;
                }
                .isBurden {
                    color: #fe6470;
                }
            }
            .chartContent {
                height: calc(100% - 50px);
                margin-top: 10px;
            }
        }
    }
}
</style>